{% extends 'install.html' %}
{% block cs %}
<style type="text/css">
	#help{
		cursor:pointer;
	}
	.progress-bar{
		color: orange;
	}
	.progress{
		margin-bottom: 0px;
	}
	.td{
		width: 100px;
	}
	.default_alert{
		margin-bottom: 10px;
	}
</style>
{% endblock %}
{% block js %}
<script type="text/javascript">
	$(document).on('click','.exe',function(){
			var id = this.id;
			$("#"+id).attr("disabled","disabled").val("玩命加载中...");
			$.get("/start/" + id,function(data,status){
			d = JSON.parse(data);
		//	alert(d.code);
			if (d.code == 0){
				$("#"+id).val("安装中");
				$("#e_"+id).attr("disabled","disabled").text("-----");
				$("#check_"+id).prop('name',"disable").prop('disabled','disabled');
			}
			else if (d.code == 100 ){
				alert("已经开始安装");
				window.location.href='/exe/';
			}
			else if (d.code == 2 ){
				$("#"+id).val("API 连接失败").removeAttr('disabled');
			}
			else{
				$("#"+id).val("安装失败").removeAttr('disabled');
			}  
			})
		})
	$(document).ready(function(){
		$("#help").hover(function() {
			$(".pipei").slideDown('show');
		});
		$("#upload").change(function(){
			$("#up_t").val($(this).val());
		});
		$('.pipei').click(function(){
			$('.pipei').attr("disabled","disabled").val('拼死加载中!!');
			$.get("{% url 'commit' %}",function(data,status){
				d_code = JSON.parse(data);
				if (d_code.code == 1){
					alert('没有上传文件');
				}
				else if (d_code.code == 0){
					alert('配置成功!');
					window.location.href="{% url 'exe' %}";
				}
			})
		});
		$("#quanxuan").click(function(e){
			$("input[name='install']").each(function(){
			if($(this).prop("checked")){     
    			$(this).prop("checked",false);     
         	}     
   			else{     
    			$(this).prop("checked",true);
    			e.preventDefault();
    			$.scojs_message('批量安装功能非常耗时，请耐心等待,确认后点击页面底部 "批量安装" 按钮', $.scojs_message.TYPE_ERROR);
   			}        
		})
		});
		$("#batch_install").click(function(){
			var string = '';
			var $btn = $(this).button('loading');
			$("input[name='install']:checked").each(function(){
				string += $(this).val() + ","
			})
			if (string == ''){
				alert("Nothing Select");
				$btn.button('reset');
			}
			else{
				$.post("{% url "batch_install" %}",{
					install_list:string 
				},
				function(data,status){
					data=JSON.parse(data);
					if (data.code == 0 ){
						alert("批量执行完毕");
						 window.location.href="{% url "exe" %}";
					}
				})

			}
		});
	})
//	$(document).on('click','.pipei',function(){
//		alert('ok');
//	})
</script>

{% endblock %}
{% block list %}
<div class="default_alert">
	<input type="button" class="btn btn-warning pipei" value="根据提交的CSV自动填写表单" style="display:none">
</div>
<table id="myTable" class="table table-hover">
	<thead>
	<tr>
		<th>ID</th>
		<th>SN</th>
		<th>业务IP</th>
		<th>进度</th>
		<th>ILO_IP</th>
		<th>Raid级别</th>
		<th>磁盘</th>
		<th>编辑</th>
		<th>安装 <span id="help" class="glyphicon glyphicon-fire"></span></th>
		<th id="quanxuan" style="color:#5bc0de">全选</th>
	</tr>
	</thead>
	<tbody>
		{% for i in forms %}
	<tr>
		<td>{{ i.id }}</td>
		<td>{{ i.sn }}</td>
		<td>{{ i.service_ip }}</td>
		<td class="td"><div class="progress">
  			<div id="hostprogress{{i.id}}" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: {{i.jindu}}%">
    		{{i.jindu}}%
  			</div>
		</div>
		{% if i.status %}
		<script type="text/javascript">
            $(document).ready(function(){
        	var progresspump = setInterval(function(){
            /* query the completion percentage from the server */
            $.get("/jindu_get/{{ i.id }}/",function(result){
               /* update the progress bar width */
               var result= eval('('+result+')');
               $.each(result,function(index,d){
               var data = d;
                /* update the progress bar width */
                $("#hostprogress{{ i.id }}").css('width',data+'%');
                /* and display the numeric value */
                $("#hostprogress{{ i.id }}").text(data+'%');
                /* test to see if the job has completed */
                if(data > 99.999) {
                /*    window.location.reload(); */
                    clearInterval(progresspump);
                    $("#"+{{i.id}}).text("即将重启").removeClass("btn-info").addClass("btn-warning");
                }
            })
            })
        }, 5000);});
		</script>
		{% endif %}
		</td>
		<td>{{ i.ilo_ip }}</td>
		<td>{{ i.level }}</td>
		<td>
			{% if i.raid_zh|length < 10 %}
			{{ i.raid_zh }}
			{% else %}
			{{ i.raid_zh|slice:":10" }}...
			{% endif %}
		</td>
		{% if i.status %}
			<td><button disabled="disabled" type="button" class="btn btn-success btn-sm" href="/edit/{{ i.id }}" data-trigger="modal"  data-title="配置装机">-----</button></td>
			<td><button disabled="disabled" type="button" class="btn btn-info btn-sm" id="{{i.id}}" >安装中</button></td>
			<td><input type="checkbox" disabled="disabled" value="{{i.id}}"></td>
		{% else %}
			<td><button  type="button" class="btn btn-success btn-sm" href="/edit/{{ i.id }}" data-trigger="modal"  data-title="配置装机" data-cssclass="info" id="e_{{i.id}}">Edit</button></td>
			{% if i.raid_zh and i.service_ip and i.ilo_ip and i.service_gw and i.ilo_gw %}
				{% if i.id in num.keys %}
				<td><input  type="button" class="exe btn btn-info btn-sm" id="{{i.id}}" value="安装失败"></td>
				{% else %}
				<td><input  type="button" class="exe btn btn-info btn-sm" id="{{i.id}}" value="安装"></td>
				{% endif %}
				<td><input id="check_{{i.id}}" type="checkbox" name="install" value="{{i.id}}"></td>
			{% else %}
				<td><button disabled="disabled" type="button" class="btn btn-info btn-sm" id="{{i.id}}" >请先编辑</button></td>
				<td><input type="checkbox" disabled="disabled" value="{{i.id}}" ></td>
			{% endif %}
		{% endif %}
	</tr>
	{% endfor %}
	</tbody>
</table>
<div class="row">
	<div class="col-lg-8">
		<div class="input-group">
			<input type="text" id="up_t" class="form-control" placeholder="上传CVS格式文件 不要使用中文命名">
			<span class="input-group-btn">
					<form enctype="multipart/form-data" method="POST" action="{% url "upload" %}"> {% csrf_token %}
					<input class="btn" id="upload" type="file" name="file" style="display:none">
					<input type="button" class="btn btn-info" onclick="$('input[name=file]').click()" value="选择文件">
					<input class="btn btn-danger" type="submit" value="提交">
					<a class="btn btn-warning" href="{% url 'download' file_name='autocommit.csv' %}">下载模板</a>
					<span></span>
					<input id="batch_install" class="btn" type="button" value="批量安装">
				</form>
			</span>
		</div>
	</div>
</div>
{% endblock %}